<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='分类' name='category' :rules="[{required : true, message : '请选择分类'}]">
                <a-tree-select show-search v-model:value='formData.category' :tree-data='categoryOptions' :field-names='{children : "children", label : "name", value : "id"}'></a-tree-select>
        </a-form-item>
        <a-form-item label='类型' name='type' :rules="[{required : true, message : '请选择类型'}]">
            <a-radio-group v-model:value="formData.type" name="type">
                <a-radio v-for="item in appTypes" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' />
        </a-form-item>
        <a-form-item label='图标' name='cover'>
            <div style="display: flex; align-items: center;">
                <a-popover placement="topLeft" title="选择图标">
                    <template #content><IconPannel @select="e => formData.cover = e" /></template>
                    <div style="width: 50px;height: 10px;display: flex;align-items: center;">
                        <template v-if="formData.cover">
                            <AppIcon :icon="formData.cover" :color="formData.bccolor" />
                        </template>
                        <SelectOutlined style="font-size: 18px;color: #999;" v-else />
                    </div>
                </a-popover>
                <span>背景颜色</span>
                <input style="margin-left: 4px;border: none;padding: 0; background: none;" type="color" v-model="formData.bccolor" />
            </div>
            <!-- <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover'>
                <template v-if='coverList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload> -->
        </a-form-item>
        <a-form-item style='display:none' name='bccolor'>
            <a-input type='hidden' v-model:value='formData.bccolor' />
        </a-form-item>
        <a-form-item label='跳转方式' name='linkType'>
            <a-radio-group v-model:value="formData.linkType" name="linkType">
                <a-radio v-for="item in linkTypes" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item v-if="formData.linkType == 1" label='链接' name='url'>
            <a-input type='text' v-model:value='formData.url' />
        </a-form-item>
        <a-form-item v-if="formData.linkType == 2" label='二维码' name='qr'>
            <a-input type='hidden' v-model:value='formData.qr' />
            <a-upload list-type='picture-card' :max-count="1" v-model:file-list='qrList' :beforeUpload='beforeUpload' :customRequest='uploadQr'>
                <template v-if='qrList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload>
        </a-form-item>
        <a-form-item label='备注' name='remark'>
            <a-input type='text' v-model:value='formData.remark' />
        </a-form-item>
        <a-form-item label='排序' name='sort'>
            <a-input type='number' v-model:value='formData.sort' />
        </a-form-item>
        <a-form-item label='前台显示' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='显示' un-checked-children='不禁用'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { optionsApi } from '@/api/apps/Category';
    import { appTypeApi, linkTypepeApi, saveApi, uploadApi } from '@/api/Apps';
        import { SelectOutlined, PlusOutlined } from '@ant-design/icons-vue';
        import { nextTick, ref } from 'vue';
import { recursionFn } from '@/utils';
import IconPannel from "@/components/IconPannel.vue";
import AppIcon from "@/components/AppIcon.vue";


    const props = defineProps<{
        row? : any;
        category? : number
    }>()

    const coverList = ref<any[]>([])
    const qrList = ref<any[]>([])

    const formRef = ref()

    
    const formData = ref<any>({
        id : 0,
        type : '',
        name : '',
        cover : '',
        bccolor : '',
        linkType : '',
        url : '',
        qr : '',
        sort : 0,
        category : '',
        enable : true,
        remark : '',

    })

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }

        if(props.row.cover) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.cover
            }
        }

        if(props.row.linkType == 2 && props.row.qr) {
            qrList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.qr
            }
        }
    }else {
        if(props.category) {
            formData.value.category = props.category
        }
    }


    async function submit() {
        let params  = await formRef.value.validate()
        console.log(params)
        if('sort' in params && params.sort === '') {
            params.sort = 0
        }


        return saveApi(params)
    }

    //分类
    const categoryOptions = ref<any[]>([])

    //app类型
    const appTypes = ref<any[]>([])
    //跳转类型
    const linkTypes = ref<any[]>([])

    function uploadCover(e) {
        uploadApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.cover = res.data
        })
    }

    function uploadQr(e) {
        uploadApi(e.file).then(res => {
            qrList.value[0].status = 'done'
            qrList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            qrList.value[0].value = res.data

            formData.value.qr = res.data
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }

    appTypeApi().then(r => {
        if(formData.value.type == '') {
            formData.value.type = Number(r.data[0].code)
        }
        appTypes.value = r.data.map(item => ({label : item.name, value : Number(item.code)}))
    })

    linkTypepeApi().then(r => {
        if(formData.value.linkType == '') {
            formData.value.linkType = Number(r.data[0].code)
        }
        
        linkTypes.value = r.data.map(item => ({label : item.name, value : Number(item.code)}))
    })

    optionsApi().then(res => {
        if(res.data) {
            categoryOptions.value.push(...recursionFn(res.data, Math.min(...res.data.map(r => r.parentId)), 'id', 'parentId', 'children'))
        }
    })

    defineExpose({
        submit
    })
</script>